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Preface 


W° graphics are an important part of all professional Web sites. Not only do they dec- 
orate pages, but they also establish an identity and make the site more useful. 
Professional Web Graphics will familiarize you with how to create and use Web graphics in 
professional Web sites. The book introduces common terms and guides you through the 
process of creating and optimizing graphics for the Web. This book focuses on the types of 
projects that Web graphic artists and designers encounter every day, including creating 
images such as backgrounds, buttons, icons, and thumbnails. It also provides detailed expla- 
nations of creating more complex Web graphics, such as animations, rollovers, image maps, 
and image slices. 


This book takes a goal-oriented approach toward teaching Web graphics creation, which 
is different from many other graphics tutorials. Most books that attempt to cover Web 
graphics focus on the tools used to create images, rather than on the images themselves. 
Professional Web Graphics focuses on the end-results required in real-world Web design 
projects, and along the way explains the tools necessary to achieve these results. 


Because Adobe Photoshop is the standard for creating computer graphics, this book uses 
Photoshop as the software for creating basic Web graphics. It also uses ImageReady to cre- 
ate Web-only graphics such as animations, image maps, and rollover buttons. However, you 
can apply the concepts and guidelines presented in this book using any commercial or 
shareware image editors. 


The Intended Audience 


Professional Web Graphics is intended for anyone who wants to create effective, useful, high- 
quality Web graphics. You should be familiar with the desktop interface of either Mac OS 
or Windows. Most chapters require only the use of Photoshop or ImageReady, and full 
explanation of the features used is included. Some chapters require simple coding of 
HTML and Cascading Style Sheets (CSS), so basic familiarity with these languages is 
required. For the projects that use HTML and CSS, you can use either an HTML editor 
such as Dreamweaver, or a basic text editor such as BBEdit or TextPad. Some exercises at 
the end of the book require simple JavaScript programming. Although familiarity with 
JavaScript is not required, it is recommended. 
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The Approach 


This book is organized into three major sections: basic, intermediate, and advanced Web 
graphics. The basic section covers general topics about computer graphics and issues about 
Web graphics that apply to every project you work on. These chapters introduce 
Photoshop, and explain how to optimize images, display graphics in Web pages, and acquire 
images to use on the Web. The intermediate section guides you through creating and using 
Web graphics that do not require special HTML coding or special Web graphics software, 
such as background images, icons, buttons, and thumbnail images. The advanced section 
shows you how to create and use graphics that require special coding to display on the 
Web, including animations, rollover effects, image maps, and image slices. 


Each chapter provides a thorough explanation of the topic, concrete examples from profes- 
sional settings, and opportunities for applying principles and practicing skills in hands-on 
tasks. Each chapter concludes with a summary, review questions, Hands-on Projects, and a 
Case Project. The summary and review questions highlight and reinforce major concepts. 
The Hands-on Projects are guided activities that let you practice, reinforce, and extend the 
techniques presented in the chapter. They also enhance your learning experience by provid- 
ing additional ways to apply your knowledge in new situations. The Case Project lets you use 
the skills that you have learned in the chapter to solve real-world problems. 


Overview of This Book 
The examples, steps, projects, and cases in this book will help you achieve the following 
objectives: 

m Use Adobe Photoshop and ImageReady to create and edit Web graphics 


m Optimize graphic files to reduce their size as much as possible without compromis- 
ing the quality of the image 


m Generate and use HTML to display images on a Web page 

a Acquire images for the Web by creating, scanning, or photographing them 

m Create, use, and tile background images 

m Create and use icons that convey meaning in a small space 

m Create buttons and enhance them with 3-D effects such as shadows and highlights 
m Create a thumbnail gallery of miniature images that link to full-sized images 


m Create GIF animations and understand the pros and cons of other animation for- 
mats, such as Flash and Shockwave 


a Make Web pages interactive by including rollover effects 
m Create splash screens with image maps that invite viewers to explore your Web site 


m Create sliced images positioned with HTML 
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Chapter 1 introduces you to the basic concepts of Web graphics and the tools and tech- 
niques used to create them. In Chapter 2, you learn how to optimize Web graphics, which 
means making the image file size as small as possible without compromising the quality of 
the image—your major goal in creating graphics for the Web. After you optimize your 
images, you incorporate them into a Web page and preview them in a browser so you know 
how they will appear on users’ screens. Chapter 3 explains how to use HTML to include 
images on a Web page. Whether you are creating graphics for print, the Web, or other 
electronic media, you need to acquire images on your computer before you can edit them. 
Chapter 4 covers all your options for acquiring images. Chapter 5 explains how to create 
background images, which are the simplest images to design and use in Web pages. The most 
common type of Web graphic is the icon, which is used to express identity and information 
with a small image. Chapter 6 covers the creation of icons. Buttons are covered in Chapter 
7. Buttons are a specific type of icon that are designed to be clicked to take the user to another 
page. Chapter 8 explains the fundamentals of creating thumbnail galleries, and shows you 
how to write a script in Photoshop to save you time when creating multiple images. In 
Chapter 9, you will learn how to create simple, effective animations. Chapter 10 teaches 
the complexities of JavaScript rollover effects. Image maps are images that can link to multi- 
ple pages and are useful as splash screens that introduce users to a Web site. Image maps are 
covered in Chapter 11. Another type of graphic used for splash screens is the sliced image. 
Sliced images are really many images placed next to each other. They can contain animations 
and rollover effects, and are one of the most advanced types of Web graphics. Sliced images 
are covered in chapter 12. 


Each chapter in Professional Web Graphics includes the following elements to enhance the 
learning experience: 


a Chapter Objectives: Each chapter in this book begins with a list of the important 
concepts to be mastered within the chapter. This list provides you with a quick 
reference to the contents of the chapter as well as a useful study aid. 


a Step-By-Step Methodology: As new concepts are presented in each chapter, 
tutorials are used to provide step-by-step instructions that allow you to actively apply 
the concepts you are learning. 


a Tips: Chapters contain Tips designed to provide you with practical advice and 
proven strategies related to the concept being discussed. Tips also provide sugges- 
tions for resolving problems you might encounter while proceeding through the 
chapter tutorials. 


a Chapter Summaries: Each chapter’s text is followed by a summary of chapter 
concepts. These summaries provide a helpful way to recap and revisit the ideas 
covered in each chapter. They include a list of common sample code techniques that 
were presented during the chapter that can be used for review or reference while 
proceeding through the chapter tutorials. 
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a Review Questions: End-of-chapter assessment begins with a set of approximately 
20 review questions that reinforce the main ideas introduced in each chapter. 
These questions ensure that you have mastered the concepts and understand the 
information you have learned. 


Hands-on Projects: Along with conceptual explanations and step-by-step 
tutorials, each chapter provides Hands-on Projects related to each major topic 
aimed at providing you with practical experience. Some of the Hands-on 
Projects provide detailed instructions, while others provide less detailed 
instructions that require you to apply the materials presented in the current 
chapter with less guidance. As a result, the Hands-on Projects provide you with 
practice creating Web Graphics in real-world situations. 


Case Project: The case project builds from one chapter to the next, providing 
you with a portfolio of Web graphics. The case is designed to help you apply 
what you have learned in each chapter to real-world situations. It gives you the 
opportunity to independently synthesize and evaluate information, examine 
potential solutions, and make recommendations, much as you would in a 
professional situation. 


Resources for Instructors 


The following supplemental materials are available when this book is used in a classroom 
setting. All of the teaching tools available with this book are provided to the instructor on 
a single CD-ROM. 


Electronic Instructor’s Manual. The Instructor’s Manual that accompanies this text- 
book includes: 


a Additional instructional material to assist in class preparation, including suggestions 
for lecture topics. 


m Solutions to all end-of-chapter materials, including the Review Questions and 
Hands-on Projects. 


ExamView® 


This textbook is accompanied by ExamView, a powerful testing software package that 
allows instructors to create and administer printed, computer (LAN-based), and Internet 
exams. ExamView includes hundreds of questions that correspond to the topics covered 
in this text, enabling students to generate detailed study guides that include page references 
for further review. The computer-based and Internet testing components allow students to 
take exams at their computers, and also save the instructor time by grading each exam 
automatically. 
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PowerPoint Presentations. This book comes with Microsoft PowerPoint slides for each 
chapter. These are included as a teaching aid for classroom presentation, to make available 
to students on the network for chapter review, or to be printed for classroom distribution. 
Instructors can add their own slides for additional topics they introduce to the class. 


Data Files. Data Files, containing all of the data necessary for steps within the chapters 
and the Hands-on Projects, are provided through the Course Technology Web site at 
www,course.com, and are also available on the Teaching Tools CD-ROM. 


Solution Files. Solutions to end-of chapter review questions, exercises, and Hands-on 
Projects are provided on the Teaching Tools CD-ROM and may also be found on the 
Course Technology Web site at www.course.com. The solutions are password-protected. 


Distance Learning. Course Technology is proud to present online courses in WebCT and 
Blackboard, as well as at MyCourse.com, Course Technology’s own course enhancement 
tool, to provide the most complete and dynamic learning experience possible. When you add 
online content to one of your courses, youre adding a lot: self tests, links, glossaries, and, most 
ofall, a gateway to the twenty-first century’s most important information resource. We hope 
you will make the most of your course, both online and offline. For more information on 
how to bring distance learning to your course, contact your local Course Technology sales 
representative. 
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Read This Before You Begin 


TO THE USER 


You can use your own computer to complete the tutorials, Hands-on Projects, and Case 
Project in this book. To use your own computer, you will need the following: 


ua A Web browser, such as Microsoft Internet Explorer version 5.0 or later, or Netscape 
Navigator version 6. 


a Adobe Photoshop 6.0 and ImageReady. 
a An HTML editor, such as Dreamweaver, or a text editor such as BBEdit or TextPad. 


Visit Our World Wide Web Site 


Additional materials designed especially for you might be available for your course on the 
World Wide Web. Go to http://www .course.com. Periodically search this site for more details. 


